<template>
    <div class="trend-chart-container" ref="target"></div>
</template>
  
<script setup>

import echarts from "echarts";
import { defineProps, ref, onMounted } from "vue";
import { CountUp } from "countup.js";
var props = defineProps({
    data: {
        type: Object,
        required: true,
    },
});
const target = ref(null);

let mChart;

onMounted(() => {
    mChart = echarts.init(target.value, 'light');
    renderChart(); // 渲染函数
});

const renderChart = () => {
    const options = {
        tooltip: { //工具提示
            trigger: 'axis',
            axisPointer: {
                type: 'cross', //会出现一个鼠标跟随移动的平均线
                crossStyle: {
                    color: 'blue'
                }
            }
        },
        legend: {
            data: ["月累计收益", "日收益曲线图"],
            right: 0
        },
        xAxis: {
            data: props.data.monthAmountList.map((item) => item.time),
            axisTick: { //x轴小刻度值
                show: false// 小刻度关闭
            }
        },
        yAxis: {},
        series: [
            {
                name: '月累计收益',
                type: 'bar',
                barWidth: 20,
                data: props.data.monthAmountList.map((item) => item.amount),
            },
            {
                name: '日收益曲线图',
                type: 'line',
                color: '#6EC6D0',
                smooth: true,//平滑
                data: props.data.monthAmountList.map((item) => item.amount)
            }
        ],

        grid: {
            top: 20,
            right: 0,
            bottom: 0,
            left: 0,
            // 计算边距时，包含标签 考虑到标签的完整显示 如果不这样就会以主图为主
            containLabel: true
        }
    };

    mChart.setOption(options)
};
</script>
  
<style lang="scss" scoped>
.trend-chart-container {
    height: 100%;
}
</style>